<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center myProfile1681889402_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub myProfile1681889402_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  myProfile1681889402_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='myProfile1681889402_fd0_0_c1_c0'>我的资料</text>
				</view>
				<view class='flex flex-wrap align-center myProfile1681889402_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>


		<view class="flex flex-direction flex-wrap align-stretch myProfile1681889402_flex_2">

			<!--      <view class="images_list" v-if="type == 2">
      	<view class="images_list_item" v-for="(v, k) in imageData" :key="k">
      		<image :src='v' mode="aspectFill"></image>
      		<image @tap.stop="deleteImg(k)" class="deImg" :src='STATIC_URL+"34.png"' mode=""></image>
      	</view>
      	<view class="images_list_item" @tap.stop="uploadIMG">
      		<image :src='STATIC_URL+"48.jpg"' mode="aspectFill"></image>
      	</view>
      </view> -->

			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0'>
				<text class='myProfile1681889402_fd2_0_c0'>头像</text>
				<view class="upload position-relative" @tap.stop="uploadVideoImg">
					<image v-if="!videoImg" :src='STATIC_URL+"18.png"' mode="aspectFill"
						class=" myProfile1681889402_fd2_0_c1_image"></image>
					<image class="myProfile1681889402_fd2_0_c1_image" mode="aspectFill" v-else :src='videoImg'></image>
				</view>

			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0'>
				<text class='myProfile1681889402_fd2_0_c0'>ID</text>
				<text class='myProfile1681889402_fd2_1_c1'>{{ID}}</text>
			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0'>
				<text class='myProfile1681889402_fd2_0_c0'>昵称</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="text" placeholder="请输入昵称" confirm-type="done"
					:maxlength="10" placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
					v-model="user_nickname" />
			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0'>
				<text class='myProfile1681889402_fd2_0_c0'>性别</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="text" placeholder="男" confirm-type="done"
					:maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
					v-model="sex" />
				<!-- <text class='fu-iconfont2  myProfile1681889402_fd2_3_c2'>&#xE78E;</text> -->
			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0'
				@tap.stop="pickerDiy1681180677013=true">
				<text class='myProfile1681889402_fd2_0_c0'>生日</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="text" placeholder="请选择生日" confirm-type="done"
					:maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
					v-model="birthday" />
				<text class='fu-iconfont2  myProfile1681889402_fd2_3_c2'>&#xE78E;</text>
			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0'>
				<text class='myProfile1681889402_fd2_0_c0'>体重</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="number" placeholder="请输入" confirm-type="done"
					:maxlength="3" placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx" v-model="weight" />
				<text class='myProfile1681889402_fd2_5_c2'>kg</text>
			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0'>
				<text class='myProfile1681889402_fd2_0_c0'>身高</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="number" placeholder="请输入" confirm-type="done"
					:maxlength="3" placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx" v-model="height" />
				<text class='myProfile1681889402_fd2_5_c2'>cm</text>
			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0' v-show="sex=='女'" @tap.stop="pickerDiy1683542037005=true">
				<text class='myProfile1681889402_fd2_0_c0'>胸围</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="text" placeholder="请输入" confirm-type="done"
					:disabled="true" :maxlength="3" placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
					v-model="bust" />
				<text class='fu-iconfont2  myProfile1681889402_fd2_3_c2'>&#xE78E;</text>
				
			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0' v-show="sex=='女'">
				<text class='myProfile1681889402_fd2_0_c0'>腰围</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="number" placeholder="请输入" confirm-type="done"
					:maxlength="3" placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
					v-model="waistline" />
				<text class='myProfile1681889402_fd2_5_c2'>cm</text>
			</view>
			
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0' v-show="sex=='女'">
				<text class='myProfile1681889402_fd2_0_c0'>臀围</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="number" placeholder="请输入" confirm-type="done"
					:maxlength="3" placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx" v-model="hipline" />
				<text class='myProfile1681889402_fd2_5_c2'>cm</text>
			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0'>
				<text class='myProfile1681889402_fd2_0_c0'>联系方式</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="text" placeholder="手机号/邮箱"
					confirm-type="done" :maxlength="20" placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
					v-model="mobile" :disabled='true' />
			</view>

			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0' @tap.stop="openPicker">
				<text class='myProfile1681889402_fd2_0_c0'>工作地点</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="text" placeholder="选择工作地点"
					confirm-type="done" :maxlength="-1" :disabled='true'
					placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx" v-model="region" />
				<text class='fu-iconfont2  myProfile1681889402_fd2_3_c2'>&#xE78E;</text>
			</view>

			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_0'>
				<text class='myProfile1681889402_fd2_0_c0'>职业</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="text" placeholder="输入您的职业"
					confirm-type="done" :maxlength="20" placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
					v-model="career" />
			</view>
			<view class='flex flex-wrap align-center justify-between myProfile1681889402_fd2_13'>
				<text class='myProfile1681889402_fd2_0_c0'>独白</text>
				<input class='flex-sub myProfile1681889402_fd2_2_c1' type="text" placeholder="输入您的独白"
					confirm-type="done" :maxlength="50" placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
					v-model="monologue" />
			</view>
		</view>


		<!--生日选择器开始 -->
		<benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1681180677013" :value.sync='birthday'
			mode='date' :picker-height='88' :current='true' :mask-show='true' fields='day' :timeout='true'
			start-year='1970-01-01' end-year='现在'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between myProfile1681889402_picker3_0'>
					<text @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
					<text>选择生日</text>
					<text class='myProfile1681889402_picker3_0_c2'
						@tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确定</text>
				</view>
			</template>
		</benben-picker>
		<!--生日选择器结束 -->


		<benben-picker ref="benbenWritePickerCodepicker1" :visible.sync="pickerDiy1683542037005" mode='selector' :mask-show='true' :picker-height='88' :value.sync='bust' :options='xiongwei'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between myProfile1681889402_picker1_0'>
					<text @tap="$refs.benbenWritePickerCodepicker1.cancel()">取消</text>
					<text>选择胸围</text>
					<text class='myProfile1681889402_picker3_0_c2'
						@tap="$refs.benbenWritePickerCodepicker1.pickerConfirm()">确认</text>
				</view>
			</template>
		</benben-picker>
		
		<view class="flex benben-position-layout flex flex-wrap align-center myProfile1681889402_flex_5">
			<button class='myProfile1681889402_fd5_0' @tap.stop="preserveFunc()">保存资料</button>
		</view>
		<view :style="{height: '144rpx'}"></view>
		<lotus-address ref="address" v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
	</view>
</template>
<script>
	import lotusAddress from "@/components/lotusAddress/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue"
	import UploadImage from '@/common/utils/upload-image.js'
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {
			lotusAddress
		},


		data() {
			return {
				"region": '',
				"lotusAddressData": {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				"pickerDiy1681181007549": false,
				"pickerDiy1681180677013": false,
				weight: "",
				height: "",
				waistline: "",
				bust: "",
				hipline: "",
				email: "",
				work_place: "",
				career: "",
				monologue: "",
				list: '',
				"fd2_0_c1id": "",
				"pickerDiy1683542037005": false,
				"sex_id": "",
				"ID": "",
				"user_nickname": "",
				"sex": "",
				"birthday": "",
				"head_img": "",
				image: '',
				usefInfo: {},
				"videoImg": "", // 视频封面
				mobile: '',
				lianxifangshi: '',
				timerId: null,
				xiongwei: [],
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.getuser()
			setTimeout(() => {
				this.$refs.address.getAddressData();
			}, 200)
			this.getBust();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取胸围列表  post647813f8bce6c
			getBust() {
				this.$api.post(global.apiUrls.post647813f8bce6c, {
					type: 4
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.xiongwei = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			//上传单图、多图方法
			soloChooseImage(id, path, obj, obj1, fnName = false) {
				let self = this
				if (!obj) obj = this
				if (!obj1) obj1 = this
				if (self.uploading) {
					return
				}
				// 从相册中选择图片
				uni.chooseImage({
					count: 1, // 默认3
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						self.uploading = true
						// 开始上传
						new UploadImage(res.tempFiles, {
							complete: function(res) {
								self.uploading = false
								if (id) self.$set(obj, id, res[0].id)
								if (path) self.$set(obj1, path, res[0].path)
								if (fnName) self[fnName]()
							},
						})
					},
				})
			},
			// 上传视频封面
			uploadVideoImg() {
				let self = this
				// 从相册中选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择

					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// console.log(tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: global.API_BASE_URL + global.API_VERSION +
									'/6438a7602dbc6', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file[]',
								formData: {
									dir: 'images'
								},
								success: (uploadFileRes) => {
									// console.log(uploadFileRes)
									self.videoImg = JSON.parse(uploadFileRes.data).data[0].path
								},
								fail: function(err) {
									console.log(err)
								}
							});
						}

					}
				});
			},
			//获取信息
			async getuser() {
				let res = await this.$api.post(global.apiUrls.userinfo, {});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg)
					return
				}
				this.usefInfo = res.data.data
				this.user_nickname = this.usefInfo.user_nickname
				this.ID = this.usefInfo.unique_id
				this.sex = this.usefInfo.sex
				this.birthday = this.usefInfo.birthday
				this.videoImg = this.usefInfo.head_img
				this.weight = parseInt(this.usefInfo.weight)
				this.height = parseInt(this.usefInfo.height)
				this.waistline = parseInt(this.usefInfo.waistline)
				// this.bust = parseInt(this.usefInfo.bust)
				this.bust = this.usefInfo.bust;
				this.hipline = parseInt(this.usefInfo.hipline)
				this.email = this.usefInfo.email
				this.mobile = this.usefInfo.mobile
				this.region = this.usefInfo.work_place
				this.career = this.usefInfo.career
				this.monologue = this.usefInfo.monologue
				this.lianxifangshi = this.usefInfo.lianxifangshi

				if (this.usefInfo.sex == 1) {
					this.sex = '男'
				} else {
					this.sex = '女'
				}

				console.log(this.usefInfo, 'this.usefInfo')
			},
			//保存
			async preserveFunc() {
				if (this.timerId) {
					clearTimeout(this.timerId)
				}
				if (!validate(this.videoImg, 'require')) {
					this.$message.info('头像不能为空');
					return false;
				}
				if (!validate(this.user_nickname, 'require')) {
					this.$message.info('昵称不能为空');
					return false;
				}
				if (!validate(this.weight, 'require')) {
					this.$message.info('体重不能为空');
					return false;
				}
				if (!validate(this.height, 'require')) {
					this.$message.info('身高不能为空');
					return false;
				}
				if (!validate(this.birthday, 'require')) {
					this.$message.info('生日不能为空');
					return false;
				}
				if (this.weight == 0) {
					this.$message.info('请输入有效体重');
					return false;
				}
				if (this.height == 0) {
					this.$message.info('请输入有效身高');
					return false;
				}
				if (!this.bust) {
					this.$message.info('请选择胸围');
					return false;
				}
				if (this.waistline == 0) {
					this.$message.info('请输入有效腰围');
					return false;
				}
				
				if (this.hipline == 0) {
					this.$message.info('请输入有效臀围');
					return false;
				}
				const currentDate = new Date();
				// 假设输入框中的时间为 '2000-10-01'
				console.log(currentDate, 'currentDate')
				const inputTime = this.birthday;
				// 将输入时间转换为日期对象
				const inputDate = new Date(inputTime);
				console.log(inputDate, 'inputDate')
				// 计算当前时间与输入时间的年份差值
				const yearDiff = currentDate.getFullYear() - inputDate.getFullYear();
				// 比较年份差值是否大于18
				if (yearDiff >= 18) {
					console.log('满足条件，可以进行下一步操作');
				} else {
					this.$message.info('年龄未满十八岁')
					return

				}
				this.timerId = setTimeout(async () => {
					let res = await this.$api.post(global.apiUrls.changeuesr, {
						head_img: this.videoImg,
						user_nickname: this.user_nickname,
						birthday: this.birthday,
						weight: this.weight,
						height: this.height,
						waistline: this.waistline,
						bust: this.bust,
						hipline: this.hipline,
						email: this.email,
						mobile: this.mobile,
						work_place: this.region,
						career: this.career,
						monologue: this.monologue,
						lianxifangshi: this.lianxifangshi
					});
					if (res.data.code != 1) {
						this.$message.info(res.data.msg)
						return
					}
					this.$message.info('修改成功');
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabBar/my/my'
						})
					}, 800)
				}, 600)
			},
			openPicker() {
				this.lotusAddressData.visible = true;
				// this.lotusAddressData.provinceName = '';
				// this.lotusAddressData.cityName = '';
				// this.lotusAddressData.townName = '';
			},
			choseValue(res) {
				// console.log(res);
				this.lotusAddressData.visible = res.visible;
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: var(--benbenbgColor1);
		background-size: 100% auto !important;
	}

	.myProfile1681889402_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.myProfile1681889402_fd0_0_c2 {
		width: 32rpx;
		height: 32rpx;
	}

	.myProfile1681889402_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.myProfile1681889402_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.myProfile1681889402_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.myProfile1681889402_picker1_0_c2 {
		color: #4781f5;
	}

	.myProfile1681889402_picker1_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}

	.myProfile1681889402_flex_2 {
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		margin: 0rpx 0rpx 96rpx 0rpx;
	}

	.myProfile1681889402_fd2_13 {
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.myProfile1681889402_fd2_5_c2 {
		color: #666666;
		font-size: 32rpx;
		font-weight: 400;
	}

	.myProfile1681889402_fd2_3_c2 {
		font-size: 28rpx;
		margin: 0rpx 0rpx 0rpx 14rpx;
	}

	.myProfile1681889402_fd2_2_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 48rpx;
	}

	.myProfile1681889402_fd2_1_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #666666;
		max-width: 400rpx;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myProfile1681889402_fd2_0_c1_image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
	}

	.myProfile1681889402_fd2_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.myProfile1681889402_fd2_0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.myProfile1681889402_picker3_0_c2 {
		color: #000000;
	}

	.myProfile1681889402_picker3_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}

	.myProfile1681889402_picker4_0_c2 {
		color: #4781f5;
	}

	.myProfile1681889402_picker4_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}

	.myProfile1681889402_flex_5 {
		background: rgba(248, 248, 248, 1);
		width: 750rpx;
		height: 144rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-size: 100% auto !important;
	}

	.myProfile1681889402_fd5_0 {
		border-top: 1px solid #eee;
		background: #6A0002;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor3);
		width: 638rpx;
		height: 88rpx;
		font-weight: 400;
		line-height: 88rpx;
		margin: 0rpx auto 56rpx auto;
	}
</style>